<template>
	<view class="page">

		<view class="my_padding">
			<div class="title-top">
				<div style="display: flex; align-items: center;" @tap="goPath('/pages/my/details')">
					<view class="uni-media-list-logo phto">
						<image :src="avatar" :lazy-load="true" style="border-radius: 10px;" />
					</view>
					<view class="header-msg">
						<view class="header-msg-bottom">{{ userinfo.name }}</view>
						<view class="header-msg-top">账户名：{{userinfo.username}}({{userinfo.level_name}})</view>
					</view>
				</div>
			</div>


			<!-- 资产数据	 -->
			<div class="assetData">
				<!-- <uni-section title="自定义列数" type="line" padding> -->
				<uni-grid :column="4" :highlight="true" :showBorder='false'>
					<uni-grid-item v-for="(item, index) in testList" :index="index" :key="index">
						<view class="grid-item-box">
							<text class="text">{{ item.name }}</text>
							<span style="font-weight: bold;padding-top: 10upx;font-size: 12px;">{{parseFloat(item.num)}}</span>
						</view>
					</uni-grid-item>
				</uni-grid>
				<!-- </uni-section> -->
			</div>
		</view>

		<view class="tab-bar">
			<uni-grid :column="6" :highlight="true" :showBorder='false' @change="tabBarChange">
				<uni-grid-item v-for="(item, index) in testList2" :index="index" :key="index">
					<view class="grid-item-box" style="margin: 0;">
						<!-- <img v-if="item.img" :src='item.img' alt="" srcset=""/> -->
						<view v-if="item.img" :style="'background-image: url('+item.img+');background-repeat: no-repeat;width: 25px;height: 25px;'"></view>
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="inviteBanner" @click="navToUrl('/pages/user/recommend')">
			<!--  -->
			<view class="inviteBanner-txt">邀请好友</view>
		</view>

		<view class="tab-bar-footer">
			<uni-grid :column="4" :highlight="true" :showBorder='false' @change="tabBarFooterChange">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" style="margin: 0;">
						<image class="icon_nav" :src="'/static/images/person/icon_'+item.icon+'.png'" mode="widthFix"></image>
						<text class="text">{{ item.title == '积分任务' ? '积分明细' : item.title }}</text>
					</view>
		<!-- 			<view class="content">
						<image class="icon_nav" :src="'/static/images/person/icon_'+item.icon+'.png'" mode="widthFix"></image>
						<text>{{ item.title }}</text>
					</view> -->
				</uni-grid-item>
			</uni-grid>
		</view>


		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				currentPage: '/pages/user/person',
				ifOnShow: false,
				unit: '',

				testList: [{
					name: '总资产',
					num: null
				},{
					name: '总投资',
					num: null
				},{
					name: '总收益',
					num: null
				},{
					name: '生息宝库',
					num: null
				},{
					name: '待收本金',
					num: null
				},{
					name: '积分',
					num: null
				},{
					name: '累计充值',
					num: null
				},{
					name: '累计提现',
					num: null
				}],
				testList2: [{
					name: '充值',
					img: '/static/images/person/chongzhi.png',
					url: '/pages/wallet/recharge'
				}, {
					name: '提现',
					img: '/static/images/person/tixian.png',
					url: '/pages/wallet/cash'
				}, {
					name: '任务',
					img: '/static/images/person/qiandao.png',
					url: '/pages/tasks/index'
				}, {
					name: '抽奖',
					img: '/static/images/person/choujiang.png',
					url: '/pages/games/lottery'
				}, {
					name: '商城',
					img: '/static/images/person/shangcheng.png',
					url: '/pages/goods/index'
				}, {
					name: '宝库',
					img: '/static/images/person/baoku.png',
					url: '/pages/yuebao/index'
				}],
				bank_id: '0',
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onLoad: function(option) {
			this.helper.checkLogin();
			this.loadImg();
			this.getInfoSet();
			this.getData();
			this.loadPersonNav();
			this.getCashlog();
			this.getCash();
		},
		methods: {
			tabBarChange(val){
				this.navToUrl(this.testList2[val.detail.index].url)
			},
			tabBarFooterChange(val){
				// console.log(this.list[val.detail.index])
				if(this.list[val.detail.index].url == 'logout'){
					this.navToPage(this.list[val.detail.index])
				}else if(this.list[val.detail.index].title == '积分任务'){
					// console.log(132131321)
					this.navToUrl('/pages/wallet/score')
				}
				else{
					this.navToUrl(this.list[val.detail.index].url)
				}
				
			},
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				// this.user_bg = this.weburl+'/storage/upload/user_bg.png?k='+range;
				this.avatar = this.weburl + '/storage/upload/icon_avatar.png?k=' + range;
			},
			getInfoSet: function() {
				//获取基础参数
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['key=unit', 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getInfoSet",
					timestamp: timestamp,
					data: {
						key: 'unit'
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					this.unit = res.data.data.value;
				})
			},
			//user数据
			getData: function() {
				//获取基础参数
				uni.showLoading({
					title: "数据加载中",
					mask: true
				})
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username=' + info.username, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						// console.log('userInfo参数:', this.userinfo)
						this.userinfo = res.data.data.userinfo;
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						this.testList[0].num = res.data.data.userinfo.money
						this.testList[1].num = res.data.data.userinfo.value
						this.testList[2].num = res.data.data.userinfo.income
						this.testList[3].num = res.data.data.userinfo.yuebao
						this.testList[4].num = res.data.data.userinfo.wait_money
						this.testList[5].num = res.data.data.userinfo.jifen
						this.testList[6].num = res.data.data.userinfo.allrecharge
						this.testList[7].num = res.data.data.userinfo.allcash
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				} else {
					uni.hideLoading();
				}
			},
			//跳转url List
			loadPersonNav: function() {
				//获取基础参数
				uni.showLoading({
					title: "数据加载中",
					mask: true
				})
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "getPersonNav",
						timestamp: timestamp,
						data: {
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						// console.log('url：', res.data.data.list)
						this.list = res.data.data.list;

						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				} else {
					uni.hideLoading();
				}
			},
			//提现金额
			getCashlog:function(){
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				let page = 1;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'page='+page,'timestamp='+timestamp]);
				this.helper.req({
					api:"getCashLog",
					timestamp:timestamp,
					data:{token:info.token,page:page},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					let cashlog = 0;
					res.data.data.list.data.map(item=>{
						if(item.status == 1){
							cashlog += item.money
						}
					})
					this.testList[7].num = cashlog;
				})
			},
			//可提余额
			getCash:function(){
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['bank_id='+this.bank_id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"cashoutBefore",
					timestamp:timestamp,
					data:{bank_id:this.bank_id,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					// console.log('可提余额：', res.data.data)
					if(res.data.data.status == 'success'){
						
						this.testList[4].num = res.data.data.usercoin;
					}else{
						this.testList[4].num = '****';
					}
					uni.hideLoading();
				})
			},
			dorefresh: function() {
				this.getData();
			},
			navToPage: function(e) {
				if (e.url == 'logout') {
					uni.showModal({
						title: "提示",
						content: "确认退出？",
						showCancel: true,
						confirmText: "确定",
						success: function(res) {
							if (res.confirm) {
								uni.removeStorageSync('userinfo');
								uni.reLaunch({
									url: "../login/login"
								})
							}
						}
					})
				} else {
					return uni.navigateTo({
						url: e.url
					});
				}
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			}
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		min-width: 325px;
		color: #56595d;
		background-color: #ddeafd;
		padding-bottom: 16px;

	}

	.user-section {
		height: 500upx;
		position: relative;
	}

	.user-info-box {
		height: 278upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		z-index: 1;
		padding: 50upx 30upx 0;
	}

	.user-info-box .portrait-box {
		position: absolute;
		left: 40upx;
	}

	.user-info-box .portrait {
		width: 120upx;
		height: 120upx;
		border-radius: 50%
	}

	.user-info-box .info-box {
		margin-left: 120upx;
		;
	}

	.vip-card-box .grid {
		background-color: initial;
		margin: -20upx -24upx
	}

	.vip-card-box .grid .iconfont.icon-gongzi {
		font-size: 60upx
	}

	.vip-card-box .card-bg {
		position: absolute;
		top: 0upx;
		right: 0;
		width: 100%;
		height: 260upx;
		z-index: 0
	}

	.vip-card-box .b-btn {
		position: absolute;
		right: 20upx;
		top: 16upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		z-index: 9
	}

	.vip-card-box .tit {
		font-size: 24upx;
		line-height: 32upx;
		color: #fff;
		margin-bottom: 28upx;
		z-index: 1
	}

	.vip-card-box .tit .cuIcon-choiceness {
		font-size: 24upx;
		padding-right: 20upx;
		color: #fff000
	}

	.vip-card-box .e-b {
		font-size: 28upx;
		color: #fff;
		margin-top: 10upx;
		z-index: 1
	}

	.vip-card-box .e-m {
		z-index: 1
	}

	.cu-list.menu>.cu-item {
		color: #333
	}

	.cu-list.menu>.cu-item .content {
		font-size: 28upx
	}

	.cu-list.menu>.cu-item .content uni-text[class*=cuIcon] {
		width: auto;
		font-size: 28upx
	}

	.cu-list.grid>.cu-item uni-text {
		font-size: 28upx;
		color: #333
	}

	.icon_task {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
	}

	uni-button {
		font-size: 24upx;
		padding: 0 60upx;
	}

	.icon_nav {
		width: 50%;
		margin: 0 auto;
	}

	.cuIcon-refresh {
		position: absolute;
		right: 20upx;
		z-index: 999;
	}

	uni-button.line-red::after {
		border: 1px solid;
	}

	.cu-list.grid.no-border {
		padding: 0;
	}
</style>
<!-- index -->
<style lang="scss" scoped>
	.inviteBanner {
		background-color: #cccccc;
		/* border-radius: 3.2vw; */
		border-radius: 15vw;
		margin: 3.33333vw auto 0;
		width: 97vw;
		height: 199upx;
		// background-image: url(@/static/images/qr_bg.png);
		background-image: url(@/static/images/sports_top.png);
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;

		.inviteBanner-txt {
			color: #fff;
			font-weight: 700;
			font-size: 9.8vw;
			font-family: Arial, Helvetica, sans-serif;
			padding-left: 12vw;
		}
	}

	.tab-bar-footer {
		
		background-color: #fff;
		border-radius: 3.2vw;
		margin: 3.33333vw auto 0;
		    margin-bottom: 60px;
			padding: 16px 0;
		width: 96.8vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	}

	.tab-bar {
		padding-bottom: 18px;
		background-color: #fff;
		border-radius: 3.2vw;
		margin: 3.33333vw auto 0;
		width: 96.8vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);

	}

	.assetData {
		width: 100%;
		margin-top: 16px;
		border-radius: 15px;
		.uni-grid-item{
			height: 66px !important;
		}
	}

	.grid-item-box span {
		display: block;
		text-align: center;
	}

	.iconfonts {
		position: absolute;
		right: 160rpx;
		bottom: 0px;
		font-size: 16px;
	}

	.header-msg {
		padding-left: 10px;
	}

	.phto {
		width: 106upx;
		height: 106upx;
		margin-left: 30 upx;
		margin-right: 30 upx;
	}

	.list {
		margin-top: 10upx;
	}

	.qrcode {
		width: 50 upx;
		height: 50 upx;
		margin-right: -20 upx;
	}

	.my_padding {
		/* padding: 50px 15px 16px 15px; */
		/* padding: 12px; */
		/* display: flex; */
		/* background-color: #fff; */
	}

	.uni-media-list-logo {
		padding: 2px;
		border-radius: 10px;
		height: 70px !important;
		width: 70px !important;
		margin-right: 0upx !important;
		margin-left: 0upx !important;
	}

	/* 	.my_padding:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 15px;
		top: 15%;
		font-size: 24px;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	} */

	.title-top {
		// padding: 46px 15px 0;
		padding-left: 55upx;
		box-sizing: border-box;
		border-radius-left-bottom: 15px;
		border-radius-right-bottom: 15px;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-erw {
		position: absolute;
		right: 45px;
		top: 13%;
		font-size: 24px;
		width: 24px;
		height: 24px;
		z-index: 9999;
	}

	.uni-list {
		margin-bottom: 30 upx;
	}

	.uni-list-cell-navigate.uni-navigate-right:after {
		font-size: 20px !important;
	}

	.header-msg-bottom {
		color: #000;
		font-size: 4.8vw;
		font-weight: 700;
		line-height: 4.8vw;
	}

	.header-msg-top {
		line-height: 1.5;
		font-weight: 400;
		font-size: 3.2vw;
		margin-top: 2.4vw;
		color: #8a8a8a;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
<!-- uni-grid -->
<style lang="scss" scoped>
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		margin-top: 10upx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		margin: 4px;

	}

	.uni-grid-item {
		// height: ;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;

	}

	.uni-grid {
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>